<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li>111111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>555555</li>
    </ul>
    <div id="box">
        <div>111111</div>
        <p>这是一个p</p>
        <span>这是一个span</span>
        <p class="cont">ppppppppp</p>
        <p>111111</p>
        <p>111111</p>
    </div>
        <p>hellohello</p>
        <p class="selsected">Hello Again1</p>
        <p class="selsected">Hello Again2</p>
        <p class="selsected">Hello Again3</p>
        <p class="selsected">Hello Again4</p>
        <p class="selsected">Hello Again5</p>
    <div>
        <span>这是span2</span>
        <p class="selsected">Hello Again6</p>
    </div>
    <script>
        // .next() 用于获取紧邻匹配元素之后的元素
        // .prev() 用于获取紧邻匹配元素之前的元素
        // .siblings() 用户获取位于匹配元素之前和后面的所有的同辈元素

        $(function(){
            // $("ul li").eq(0).next().css("color","red");
            // $("ul li").eq(4).prev().css("color","red");
            // $("ul li").eq(3).siblings().css("color","red");

            // 找到每个段落的后面紧邻的同辈元素中类名为selected的元素
            // $("p").next(".selsected").css("color","red");
            $(".cont").siblings().css("color","blue");
        })
        
        // js获取当前节点的下一个兄弟节点
        // function next(obj){
        //     return obj.nextElementSiblings || obj.nextSiblings
        // }

        


    </script>
</body>
</html>